<template>
	<view class="dingdanCenterPage">
		<!-- 顶部的TabBar设计 -->
		<view class="tabbar">
			<block v-for="item in tabs" :key="item.id">
				<view @click="changeTab(item.id)" class="tab" :class="{'active':item.select}">{{item.name}}</view>
			</block>
		</view>
		<view class="line" style="margin-top: 120rpx;"></view>
		<!-- v-if 用于删除一个元素  v-show 多用于频繁的切换操作，但是不会隐藏这个元素 -->
		<view v-show="tabs[0].select" class="part">
			推荐内容
		</view>
		<view v-show="tabs[1].select" class="part">
			关注内容
		</view>
		<view v-show="tabs[2].select" class="part">
			收藏内容
		</view>
		<view v-show="tabs[3].select" class="part">
			<orderJD></orderJD>
		</view>
	</view>
</template>

<script>
	import orderJD from "@/components/orderJD.vue"
	export default {
		data() {
			return {
				tabs: [{
						id: 1,
						name: '待支付',
						select: true
					},
					{
						id: 2,
						name: '待入住',
						select: false
					},
					{
						id: 3,
						name: '待评价',
						select: false
					},
					{
						id: 4,
						name: '全部订单',
						select: false
					}
				],
			}
		},
		onLoad(option) {
			//从跳转前的页面传递过来下标
			this.tabs.forEach(item => {
				item.select = false
			})
			this.tabs[option.index].select = true
		},
		components: {
			orderJD,
		},
		methods: {
			changeTab(id) {
				this.tabs.forEach(item => {
					//先将所有的选项变为没有颜色
					//赋值关系：从右向左
					item.select = false
					//再将选中的选项select设置为true
					// == 等于符号
					if (item.id == id) {
						item.select = true
					}
				})
			}
		}
	}
</script>

<style>
	.dingdanCenterPage {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #F1F3F4;
	}

	.tabbar {
		position: fixed;
		top: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
	}

	.tab {
		width: 150rpx;
		height: 50rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	/* 设置一个被选中的样式 */
	.active {
		/* background-color: red; */
		border-bottom: 5rpx solid greenyellow;
		color: balck;
	}

	.line {
		height: 10rpx;
		background-color: #f1f3f4;
	}
</style>
